import React, { Component } from 'react'
import { Row, Col, Layout, Menu, Breadcrumb } from 'antd'
import styled from 'styled-components'

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

const BasicLayoutWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display:flex;
  flex-wrap: nowrap;
  .container {
    width: 100%;
  height: 100%;
    .left {
      /* width: 20%; */
      background: lightblue;
    }
    .right {
      /* width: 80%; */
      /* background: lightcoral; */
      .header {
        width: 100%;
      }
    }
  }

`


export default class BasicLayout extends Component {
  render() {
    return (
      <BasicLayoutWrapper>
         <Row className="container">
            <Col className="left" span={4}>
              左边
            </Col>
            <Col className="right" span={20}>
              <Header className="header">头部</Header>
              <Row>
                {this.props.children}
              </Row>
            </Col>
         </Row>
      </BasicLayoutWrapper>
    )
  }
}
